<template>
    <div class='tmp'>
        <imglunbo class='lunbo' :swipelist='swipelist'></imglunbo>
        <div class='content'>
            <div class='info_title'>
                <h2>{{infolist.title}}</h2>
            </div>
            <div class='info_price'>
                原价:<s>{{infolist.market_price}}</s>
                &nbsp;
                优惠价:<strong style='color: red'>{{infolist.sell_price}}</strong>
            </div>
            <div class='info_number'>
                购买数量:
                <inputnumber v-on:senddata='getshopnumber'></inputnumber>
            </div>
            <div class='goodsparam'>
                商品货号：{{infolist.goods_no}} <br>
                库存情况：{{infolist.stock_quantity}}<br>
                上架时间：{{infolist.add_time | moments}}<br>
            </div>
            <div class='info_btn'>
                <mt-button @click='buy'>立即购买</mt-button><mt-button @click='addshopcar'>加入购物车</mt-button>
            </div>
        </div>
        <mt-button @click='getgoodsshow' class='goodsshow'>商品详细信息</mt-button>
        <comment :artid='goodsid'></comment>
    </div>
</template>
<script>
    import {vm,key} from '../common/common.js';
    import {setItem,outItem,getcount,getgoodslist} from '../common/localstorage.js';
    import common from '../field/getfield.js';
    import imglunbo from '../imglunbo/imglunbo.vue';
    import comment from '../comment/comment.vue';
    import inputnumber from '../inputnumber/inputnumber.vue';
    export default{
        components:{
            imglunbo:imglunbo,
            comment:comment,
            inputnumber:inputnumber
        },
        data(){
            return {
                infolist:[],
                swipelist:[],
                goodsid:0,
                shopnumber:0,
                shopcartdata:'',
            }
        },
        methods:{
            getinfo(){
                let url = common.apidomain+'/api/goods/getinfo/'+this.$route.params.goodsid;
                console.log(this.$route.params.goodsid)
                this.$http.get(url).then(res=>{
                    this.infolist=res.body.message[0];
                    console.log(this.infolist)
                })
            },
            getswipelist(){
                let url = common.apidomain+'/api/getthumimages/'+this.$route.params.goodsid;
                console.log(this.$route.params.goodsid)
                this.$http.get(url).then(res=>{
                    res.body.message.forEach(item=>{
                        item.img='http://ofv795nmp.bkt.clouddn.com/'+item.src;
                        item.url='';
                    })
                    this.swipelist=res.body.message;
                })
            },
            getgoodsshow(){
                this.$router.push({name:'goodsshow',param:{goodsid:this.goodsid}})
            },
            //把获取当前选的的商品数量
            getshopnumber(shopnumber){
                this.shopnumber=shopnumber
            },
            //添加到购物车并把该商品的数量传入app.vue组件中，同时进行缓存处理；
            addshopcar(){
                vm.$emit(key,this.shopnumber)
                setItem(this.goodsid,this.shopnumber)
            },
            buy(){
                outItem();
                getcount();
            }
        },
        created(){
            this.goodsid=this.$route.params.goodsid;
//            this.shopcartdata=localStorage.getItem('abc');
            this.getswipelist();
            this.getinfo()
        }
    }
</script>
<style scoped>
    .goodsshow{
        margin:10px 0px ;
        width: 100%;
    }
    .info_btn button{
        margin-left: 20px;
    }
    .goodsparam{
        border: 1px solid #666666;
        padding-left: 10px;
        margin:10px 0px;

    }
    .info_price{
        padding-left: 10px;
        margin: 10px 0px;
    }
    .info_number{
        padding-left: 10px;
    }
    .info_title{
        margin-top: 15px;
    }
    .info_title h2{
        font-size: 20px;
    }
    .lunbo{
        border-bottom: 1px solid #666666;
    }

</style>